﻿<%@ Page Title="" Language="C#" MasterPageFile="~/UI/Site.Master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="RetailOnlineSite.Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link rel="stylesheet" type="text/css" href="Css/style4.css" />
    
    <link rel="Stylesheet" type="text/css" href="Css/product.css" />
    <style type="text/css" media="screen">
        div.top_categories ul.category
        {
            width: 844px;
            padding: 0;
            margin: 0;
        }
        div.top_categories ul.category li
        {
            display: inline;
        }
        div.top_categories ul.category li a
        {
            width: 206.6px;
            height: 45px;
            background: #fff;
            float: left;
            border: 1px solid #ccf;
            border-bottom: 2px solid #4d90fe;
            text-decoration: none;
            color: #000;
            font-weight: bold;
        }
        div.top_categories ul.category li a img
        {
            float: left;
            width: 86px;
            height: 100%;
            border: none;
            margin: 0;
            padding: 0;
            margin-right: 10px;
        }
        div.top_categories ul.category li.active a
        {
            width: 214px;
            color: #fff;
            background-color: #9dc2ff;
            border: 2px solid #4d90fe;
            border-bottom: 1px solid #fff;
        }
        div.top_categories div.content
        {
            float: left;
            clear: both;
            border: 2px solid #4d90fe;
            border-top: none !important;
            background: #fff;
            padding: 0;
            width: 840px;
        }
        /* New style */div.new_categories div.header
        {
            margin-top: 5px;
            width: 842px;
            border-top: 1px #4d90fe solid;
            border-left: 1px #4d90fe solid;
            border-right: 1px #4d90fe solid;
            height: 30px;
            text-align: center;
            font-weight: bolder;
            color: #00a65d;
            background-color: #fff;
        }
        div.new_categories div.header p
        {
            margin-top: 5px;
        }
        div.new_categories ul.category
        {
            height: 25px;
            border: 1px solid #4d90fe;
            background-color: #fff;
            width: 842px;
            padding: 0;
            margin: 0;
        }
        div.new_categories ul.category li
        {
            display: inline;
        }
        div.new_categories ul.category li a
        {
            width: 100px;
            height: 25px;
            background: #fff;
            float: left;
            text-decoration: none;
            color: #000;
            font-weight: bold;
            text-align: center;
        }
        div.new_categories ul.category li a p
        {
            margin-top: 3px;
        }
        div.new_categories ul.category li.active a
        {
            width: 101px;
            color: #fff;
            background-color: #4d90fe;
        }
        div.new_categories div.content
        {
            float: left;
            clear: both;
            border: 1px solid #4d90fe;
            border-top: 0;
            background: #fff;
            padding: 0;
            width: 842px;
        }
        /* Second hand style */div.sh_categories div.header
        {
            margin-top: 5px;
            width: 842px;
            border-top: 1px #c00000 solid;
            border-left: 1px #c00000 solid;
            border-right: 1px #c00000 solid;
            height: 30px;
            text-align: center;
            font-weight: bolder;
            color: #c00000;
            background-color: #fff;
        }
        div.sh_categories div.header p
        {
            margin-top: 5px;
        }
        div.sh_categories ul.category
        {
            width: 842px;
            padding: 0;
            margin: 0;
            height: 25px;
            border: 1px solid #c00000;
            background-color: #fff;
        }
        div.sh_categories ul.category li
        {
            display: inline;
        }
        div.sh_categories ul.category li a
        {
            width: 100px;
            height: 25px;
            background: #fff;
            float: left;
            text-decoration: none;
            color: #000;
            font-weight: bold;
            text-align: center;
        }
        div.sh_categories ul.category li a p
        {
            margin-top: 3px;
        }
        div.sh_categories ul.category li.active a
        {
            width: 101px;
            color: #fff;
            background-color: #c00000;
        }
        div.sh_categories div.content
        {
            float: left;
            clear: both;
            border: 1px solid #c00000;
            border-top: 0;
            background: #fff;
            padding: 0;
            width: 842px;
        }
    </style>

    <script language="javascript" type="text/javascript" src="Js/jquery.easing.js"></script>

    <script language="javascript" type="text/javascript" src="Js/script.js"></script>

    <script language="javascript" type="text/javascript" src="Js/jquery.tabify.source.js"></script>

    <script language="javascript" type="text/javascript">

        var pageUrl = '<%=ResolveUrl("~/Default.aspx")%>'

        function LoadTopCategories() {
            $.ajax({
                type: "POST",
                url: "WebService.asmx/LoadTopCategories",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(response) {
                    var categories = response.d;
                    if (categories != null && categories.length > 0) {
                        var html = "";
                        var div = "";
                        for (k = 0; k < categories.length; k++) {
                            html += "<li " + (k == 0 ? "class='active'" : "") + " id='" + categories[k].CategoryID + "'><a href='#" + categories[k].UrlName + "'><span><img src='Images/thumbl_980x340.png' alt='title' /></span><p>" + categories[k].Name + "</p></a></li>";
                            div += "<div id='" + categories[k].UrlName + "' class='content'></div>";
                        }

                        $('div.top_categories ul.category').append(html);
                        $('div.top_categories').append(div);

                        $('div.top_categories ul.category').tabify();

                    }
                },
                failure: function(response) {
                    alert(response.d);
                }
            });
        }

        function LoadNewCategories() {
            $.ajax({
                type: "POST",
                url: "WebService.asmx/LoadNewCategories",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(response) {
                    var categories = response.d;
                    if (categories != null && categories.length > 0) {
                        var html = "";
                        var div = "";
                        for (k = 0; k < categories.length; k++) {
                            html += "<li " + (k == 0 ? "class='active'" : "") + " id='" + categories[k].CategoryID + "'><a href='#new_" + categories[k].UrlName + "'><p>" + categories[k].Name + "</p></a></li>";
                            div += "<div id='new_" + categories[k].UrlName + "' class='content'></div>";
                        }

                        $('div.new_categories ul.category').append(html);
                        $('div.new_categories').append(div);

                        $('div.new_categories ul.category').tabify_new();

                    }
                },
                failure: function(response) {
                    alert(response.d);
                }
            });
        }

        function LoadSHCategories() {
            $.ajax({
                type: "POST",
                url: "WebService.asmx/LoadSHCategories",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(response) {
                    var categories = response.d;
                    if (categories != null && categories.length > 0) {
                        var html = "";
                        var div = "";
                        for (k = 0; k < categories.length; k++) {
                            html += "<li " + (k == 0 ? "class='active'" : "") + " id='" + categories[k].CategoryID + "'><a href='#sh_" + categories[k].UrlName + "'><p>" + categories[k].Name + "</p></a></li>";
                            div += "<div id='sh_" + categories[k].UrlName + "' class='content'></div>";
                        }

                        $('div.sh_categories ul.category').append(html);
                        $('div.sh_categories').append(div);

                        $('div.sh_categories ul.category').tabify_sh();

                    }
                },
                failure: function(response) {
                    alert(response.d);
                }
            });
        }

        $(document).ready(function() {

            $obj = $('#lofslidecontent45').lofJSidernews({ interval: 3000,
                easing: 'easeInOutQuad',
                duration: 1200,
                auto: true,
                maxItemDisplay: 5,
                startItem: 0,
                navPosition: 'horizontal', // horizontal
                navigatorHeight: 15,
                navigatorWidth: 25,
                mainWidth: 780
            });

            //            $("img").lazyload({
            //                placeholder: "img/grey.gif",
            //                effect: "fadeIn"
            //            });

            LoadTopCategories();
            LoadNewCategories();
            LoadSHCategories();
        });
    </script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div id="pageContent">
        <!------------------------------------- THE CONTENT ------------------------------------------------->
        <div id="lofslidecontent45" class="lof-slidecontent" style="width: 644px; height: 250px;
            margin: 0; float: left;">
            <div class="preload">
                <div>
                </div>
            </div>
            <!-- MAIN CONTENT -->
            <div class="lof-main-outer" style="width: 644px; height: 270px;">
                <ul class="lof-main-wapper">
                    <li>
                        <img src="images/thumbl_980x340.png" title="Newsflash 2" alt='' width="780px">
                        <div class="lof-main-item-desc">
                            <h3>
                                <a target="_parent" title="Newsflash 1" href="#Category-1">/ Newsflash 1 /</a> <i>—
                                    Monday, February 15, 2010 12:42</i></h3>
                            <h2>
                                Content of Newsflash 1</h2>
                            <p>
                                The one thing about a Web site, it always changes! Joomla! makes it easy to add
                                Articles, content,... <a class="readmore" href="#">Read more </a>
                            </p>
                        </div>
                    </li>
                    <li>
                        <img src="images/thumbl_980x340_002.png" title="Newsflash 1" alt='' width="780px">
                        <div class="lof-main-item-desc">
                            <h3>
                                <a target="_parent" title="Newsflash 2" href="#Category-2">/ Newsflash 2 /</a> <i>—
                                    Monday, February 15, 2010 12:42</i></h3>
                            <h2>
                                Content of Newsflash 2</h2>
                            <p>
                                Joomla! makes it easy to launch a Web site of any kind. Whether you want a brochure
                                site or you are... <a class="readmore" href="#">Read more </a>
                            </p>
                        </div>
                    </li>
                    <li>
                        <img src="images/thumbl_980x340_003.png" title="Newsflash 3" alt='' width="780px">
                        <div class="lof-main-item-desc">
                            <h3>
                                <a target="_parent" title="Newsflash 3" href="#Category-3">/ Newsflash 3 /</a> <i>—
                                    Monday, February 15, 2010 12:42</i></h3>
                            <h2>
                                Content of Newsflash 3</h2>
                            <p>
                                With a library of thousands of free Extensions, you can add what you need as your
                                site grows. Don't... <a class="readmore" href="#">Read more </a>
                            </p>
                        </div>
                    </li>
                    <li>
                        <img src="images/thumbl_980x340_004.png" title="Newsflash 5" alt='' width="780px">
                        <div class="lof-main-item-desc">
                            <h3>
                                <a target="_parent" title="Newsflash 4" href="#Category-4">/ Newsflash 4 /</a> <i>—
                                    Monday, February 15, 2010 12:42</i></h3>
                            <h2>
                                Content of Newsflash 4</h2>
                            <p>
                                Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your
                                own dynamic Web... <a class="readmore" href="#">Read more </a>
                            </p>
                        </div>
                    </li>
                    <li>
                        <img src="images/thumbl_980x340_005.png" title="Newsflash 5" alt='' width="780px">
                        <div class="lof-main-item-desc">
                            <h3>
                                <a target="_parent" title="Newsflash 5" href="#">/ Newsflash 5 /</a> <i>— Monday, February
                                    15, 2010 12:42</i></h3>
                            <h2>
                                Content of Newsflash 5</h2>
                            <p>
                                Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your
                                own dynamic Web... <a class="readmore" href="#">Read more </a>
                            </p>
                        </div>
                    </li>
                    <li>
                        <img src="images/thumbl_980x340_006.png" title="Newsflash 6" alt='' width="780px">
                        <div class="lof-main-item-desc">
                            <h3>
                                <a target="_parent" title="Newsflash 6" href="#">/ Newsflash 6 /</a> <i>— Monday, February
                                    15, 2010 12:42</i></h3>
                            <h2>
                                Content of Newsflash 6</h2>
                            <p>
                                Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your
                                own dynamic Web... <a class="readmore" href="#">Read more </a>
                            </p>
                        </div>
                    </li>
                    <li>
                        <img src="images/thumbl_980x340_007.png" title="Newsflash 7" alt='' width="780px">
                        <div class="lof-main-item-desc">
                            <h3>
                                <a target="_parent" title="Newsflash 7" href="#">/ Newsflash 7 /</a> <i>— Monday, February
                                    15, 2010 12:42</i></h3>
                            <h2>
                                Content of Newsflash 7</h2>
                            <p>
                                Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your
                                own dynamic Web... <a class="readmore" href="#">Read more </a>
                            </p>
                        </div>
                    </li>
                    <li>
                        <img src="images/thumbl_980x340_008.png" title="Newsflash 8" alt='' width="780px">
                        <div class="lof-main-item-desc">
                            <h3>
                                <a target="_parent" title="Newsflash 8" href="#">/ Newsflash 8 /</a> <i>— Monday, February
                                    15, 2010 12:42</i></h3>
                            <h2>
                                Content of Newsflash 8</h2>
                            <p>
                                Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your
                                own dynamic Web... <a class="readmore" href="#">Read more </a>
                            </p>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- END MAIN CONTENT -->
            <!-- NAVIGATOR -->
            <div class="lof-navigator-wapper">
                <div class="lof-navigator-outer">
                    <ul class="lof-navigator">
                        <li><span>1</span></li>
                        <li><span>2</span></li>
                        <li><span>3</span></li>
                        <li><span>4</span></li>
                        <li><span>5</span></li>
                        <li><span>6</span></li>
                        <li><span>7</span></li>
                        <li><span>8</span></li>
                    </ul>
                </div>
            </div>
            <!----------------- --------------------->
        </div>
        <img width="180px" height="250px" alt="advertise" src="uploads/advertise/hot.jpg"
            style="margin-left: 10px; margin-bottom: 10px; float: left" />
        <br style="clear: both" />
        <div class="top_categories">
            <ul class="category">
            </ul>
        </div>
        <br style="clear: both" />
        <div class="new_categories">
            <div class="header">
                <p style="">
                    Sản phẩm mới</p>
            </div>
            <ul class="category">
            </ul>
        </div>
        <br style="clear: both" />
        <div class="sh_categories">
            <div class="header">
                <p style="">
                    Sản phẩm loại hai</p>
            </div>
            <ul class="category">
            </ul>
        </div>
    </div>
</asp:Content>
